<template>
    <div class="role">
      操作日志
      <span class="dataDemonstration">请选择时间段:</span>
      <el-date-picker
        v-model="dataValue"
        type="daterange"
        unlink-panels
        range-separator="To"
        start-placeholder="startDate"
        end-placeholder="endDate"
        :default-time="dataValue"
        :shortcuts="shortcuts"

      />

    <el-button type="primary" class="search-date-box-button" @click="handleSearch(this.dataValue)">搜索</el-button>
      
  
      <!-- 自定义操作日志界面 -->
      <systemForm
        :data-source="searchResult"
        :columns="columns"
        :pagination="pagination"
      >
        <!-- 自定义各复杂渲染列的插槽布局 -->
        <template #IfSuccess="{ row }">
          <div>{{ row.IfSuccess }}</div>
          <!-- <el-switch :modelValue="row.IfSuccess" /> -->
        </template>
       
      </systemForm>
    </div>
  </template>
  
  <script>
  import systemForm from '../system/components/systemForm.vue'
  export default {
    data() {
      return {
        searchResult:[],
        // 模拟所有角色信息的数据
        columnSearch: Array(10).fill(null).map((_, index) => ({
          ObjectId: index + 1,
          UserId: '角色名称' + (index + 1),
          OperateTime:new Date().toISOString().split('T')[0],
          OperateName:'事件名'+index,
          OperateDesc: '描述' + (index + 1),
        })),
        //操作日志搜索结果表格中列的定义数据
        columns: [
          {
            type: 'selection',
            width: '80px'
          },
          {
            label: '序号',
            prop: 'ObjectId',
            width: '80px'
          },
          {
            label: '操作用户',
            prop: 'UserId',
            width: '180px'
          },
          {
            label: '事件',
            prop: 'OperateName',
            width: '240px',
          },
          {
            label: '操作描述',
            prop: 'OperateDesc',
            width: '240px',
          },
          {
            label: '操作时间',
            prop: 'OperateTime',
            width: '240px',
          },
          
        ],
        // 分页器配置
        // pagination: false,
        pagination: {
          total: 50,
          layout: 'total, ->, prev, pager, next, jumper',
          onCurrentChange:  this.pageChange,
        },
        dataValue:[],
         //快速选择数据
         shortcuts: [
          {
            text:'本日',
            value:()=>{
              const today = new Date();
              const start = new Date(today.getFullYear(), today.getMonth(), today.getDate()); // 获取当天零点的时间
              const end = new Date();
              return [start, end];

            }
          },
          {
            text: '本周',
            value: () => {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              return [start, end]
            },
          },
          {
            text: '本月',
            value: () => {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              return [start, end]
            },
          },
          
        ]
        
  }},
    components: {
      systemForm,
    },
     //从新挂载时刷新
     created(){
      //初始化默认显示日期数据
      const startDateTime=new Date()
      const endDateTime=new Date()
      this.dataValue=[startDateTime.toISOString(),endDateTime.toISOString()]

      
    },
    mounted(){
      //初始化搜索结果数据
      if(this.$store.getters['search/opeLogSearchResult']){
        this.searchResult=this.$store.getters['search/opeLogSearchResult']
      }
      //初始化搜索日期数据
      if(this.$store.getters['searchDate/opeLogSearchDate']){
        this.dataValue=this.$store.getters['searchDate/opeLogSearchDate']
        // console.log('this.dataValue',this.dataValue)
      }
    },

    methods: {
      //点击搜索触发事件
      handleSearch(event) {

        const dataValue=event

        //将传入的参数拆分成开始时间和结束时间
        const startDate = new Date(dataValue[0])
        const endDate = new Date(dataValue[1])

        // 如果输入的日期无效，则返回空数组
        if (isNaN(startDate.getTime()) || isNaN(endDate.getTime())) {
          this.searchResult=[]
        }

        //将搜索框时间段按日期转成数组dates
        const daysBetween = (endDate.getTime() - startDate.getTime()) / (24 * 60 * 60 * 1000)
        const dates = []
        for (let i = 0; i <= daysBetween; i++) {
          const date = new Date(startDate.getTime() + i * 24 * 60 * 60 * 1000)
          dates.push(`${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate()}`)
          // dates.push(`${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`)
        }
        console.log("dataValue", dates)

        //实现时间段内的数据搜索

        this.searchResult=this.columnSearch.filter((item)=>{
              return dates.includes(item.OperateTime)
        })

        //将搜索结果存储到store，用于回显
        this.$store.dispatch('search/saveOpeLogSearchResult',this.searchResult)
        //将搜索时间存储到store，用于回显
        this.$store.dispatch('searchDate/saveOpeLogSearchDate',dataValue)
        return
        }
      }
}
  </script>
  
  <style scoped>
  
  </style>
 